<!-- 设置操作密码 -->
<template>
	<!-- =========================钱包=================== -->
	<view class="content">
		<view class="cut"></view>
		<image class="tx" src="../../../../static/images/center/pwd.png" mode=""></image>
		<view class="login">
			<view class="l_top" style="margin-bottom:100rpx;">
				<view class="l_text">{{label}}</view>
			</view>
			<view class="l_top" @tap="shown">
				<view class="mima">
					<view class="item">
						<view v-if="len<=0" :class="{line:show}"></view>
						<view v-if="len>=1" class="dot"></view>
					</view>
					<view class="item">
						<view v-if="len==1" :class="{line:show}"></view>
						<view v-if="len>=2" class="dot"></view>
					</view>
					<view class="item">
						<view v-if="len==2" :class="{line:show}"></view>
						<view v-if="len>=3" class="dot"></view>
					</view>
					<view class="item">
						<view v-if="len==3" :class="{line:show}"></view>
						<view v-if="len>=4" class="dot"></view>
					</view>
					<view class="item">
						<view v-if="len==4" :class="{line:show}"></view>
						<view v-if="len>=5" class="dot"></view>
					</view>
					<view class="item">
						<view v-if="len==5" :class="{line:show}"></view>
						<view v-if="len>=6" class="dot"></view>

					</view>
					<input class="trade_pwd" disabled="disabled" maxlength="6" id="targetInput" @focus="focus1" @blur="blur1" type="number"
					 v-model="trade_pwd" />
				</view>
			</view>
		</view>
		<view class="btn" @tap="clickBtn">{{btn}}</view>
		<view class="keypan" :animation="animationData">
			<view class="titles" @tap='hide'>
				<text class="cell-more yticon icon-xia"></text>
			</view>
			<view :class="index == 11?'bgicon':''" class="pan_num_key" hover-class="pan_num_checked" :hover-stay-time="50" v-for="(items,index) in boardlists"
			 :key="index" @click="writepwd(items.id)">{{items.con}}</view>
		</view>
	</view>
</template>
<script>
	import {
		setPassword
	} from "@/api/user.js"
	export default {
		data() {
			return {
				type: 1,
				backUrl: false,
				animationData: {},
				label: "创建操作密码",
				btn: "下一步",
				trade_pwd: '',
				first_pwd: '',
				second_pwd: '',
				focus: true,
				show: false,
				numarr: [],
				d_time: 10,
				nextsteep: false,
				tel: 0,
				numlength: "",
				gopen: false,
				isactive: true,
				resgetcode: false,
				boardlists: [{
						id: 1,
						con: 1,
						checked: false
					}, {
						id: 2,
						con: 2,
						checked: false
					}, {
						id: 3,
						con: 3,
						checked: false
					}, {
						id: 4,
						con: 4,
						checked: false
					}, {
						id: 5,
						con: 5,
						checked: false
					}, {
						id: 6,
						con: 6,
						checked: false
					}, {
						id: 7,
						con: 7,
						checked: false
					}, {
						id: 8,
						con: 8,
						checked: false
					}, {
						id: 9,
						con: 9,
						checked: false
					}, {
						id: 10,
						con: "",
						checked: false
					}, {
						id: 11,
						con: 0,
						checked: false
					},
					{
						id: 12,
						con: "",
						checked: false
					},

				],
				code: null,
				step: null
			};
		},
		computed: {
			len: function() {
				if (this.trade_pwd.length == 6) {
					// 第一次进来可以点击的

				}
				return this.trade_pwd.length
			}
		},
		onLoad(options) {
			if (options.data) {
				let data = JSON.parse(decodeURIComponent(options.data));
				if (data.type == 2) {//
					this.code = data.code;
					this.type = data.type;
					this.label = data.label;
					this.step = 2
				}
			}
			if (options.backurl) {
				this.backUrl = true
			}
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease',
			})
			this.animation = animation
		},
		methods: {
			writepwd(num) {
				if (num == 12) {
					this.back();
					return;
				}
				if (num == 11) {
					num = 0;
					this.boardlists[10].checked = true;
				} else {
					this.boardlists[num - 1].checked = true;
				}
				this.numarr.push(num);
				if (this.numarr.length > 6) {
					return
				}
				this.trade_pwd = this.numarr.join("");
			},
			back() {
				this.numarr.pop();
				if (this.trade_pwd.length > 0) {
					this.trade_pwd = this.trade_pwd.substring(0, this.trade_pwd.length - 1)
				}
			},
			blur1() {
				this.show = false
			},
			focus1() {

				this.show = true
			},
			shown() {
				this.animation.bottom(0).step()
				this.animationData = this.animation.export()
			},
			hide() {
				this.animation.bottom(-300).step()
				this.animationData = this.animation.export()
			},
			clickBtn() {
				let _this = this
				if (_this.trade_pwd.length < 6) {
					uni.showToast({
						icon: "none",
						title: "密码长度不能少于6位"
					})
					return;
				}
				if (_this.btn == '下一步') {
					_this.btn = "提交"
					_this.label = "确认操作密码"
					_this.first_pwd = _this.trade_pwd
					_this.numarr = [];
					_this.trade_pwd = "";
				} else {
					_this.second_pwd = _this.trade_pwd
					if (_this.first_pwd !== _this.second_pwd) {
						uni.showToast({
							icon: "none",
							title: "两次密码不一致",
							success: function() {
								_this.first_pwd = ""
								_this.second_pwd = ""
								_this.trade_pwd = ""
								_this.btn = "下一步"
								_this.label = "创建操作密码"
								_this.numarr = [];
								_this.trade_pwd = "";
							}
						})
					} else if (_this.first_pwd == "123456" &&_this.second_pwd == "123456") {
						uni.showModal({
							content: "密码过于简单，请重新设置",
							showCancel: false,
							success: function() {
								_this.first_pwd = ""
								_this.second_pwd = ""
								_this.trade_pwd = ""
								_this.btn = "下一步"
								_this.label = "创建操作密码"
								_this.numarr = [];
								_this.trade_pwd = "";
							}
						})
					} else {
						let _this = this
						setPassword({
							type: this.type,
							first_password: this.first_pwd,
							second_password: this.second_pwd,
							code: this.code,
							step: this.step
						}).then(res => {
							let info = uni.getStorageSync('userInfo')
							info.withdraw_pass = true
							uni.setStorageSync('userInfo', info)
							uni.showModal({
								content: "设置成功",
								showCancel: false,
								success: function() {
									if (_this.backUrl) {
										uni.navigateBack({

										})
									} else {
										uni.redirectTo({
											url: "./pwdready"
										})
									}
								}
							})
						})
					}
				}
			}
		}

	};
</script>
<style lang="scss" scoped>
	.content {
		width: 100%;
		font-size: 28rpx;
		background: #fff;
		color: #555;
		height: 100vh;
		font-weight: 400;
		text-align: center;

		.cut {
			height: 20rpx;
			background-color: #eee;
		}

		.tx {
			margin-top: 100rpx;
			width: 150rpx;
			height: 150rpx;
		}

		.btn {
			margin: 0 auto;
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: $theme-color;
			border-radius: 40rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
		}

		.keypan {
			width: 100%;
			height: 250px;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);

			.titles {
				height: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				font-size: 16px;
				color: #333;
				border-top: 1rpx solid #eee;
			}

			.pan_num_key {
				width: 250rpx;
				height: 110rpx;
				line-height: 110rpx;
				box-sizing: border-box;
				border-top: 1rpx solid #eee;
				border-right: 1rpx solid #eee;
				float: Left;
				text-align: center;
				background: #fff;
				font-size: 60rpx;
				color: #333;

			}

			.pan_num_checked {
				background-color: #eee;
			}

			.bgicon {
				background: url(../../../../static/images/public/delete.png) no-repeat center center;
				background-color: #eee;
				background-size: 55rpx 30rpx;
			}
		}

		.login {
			width: 100%;
			height: 300rpx;

			.l_top {
				width: 700rpx;
				margin: 0 auto;
				position: relative;

				.l_text {
					font-size: 28rpx;
					text-align: center;
					margin: 0 auto;
					top: 36rpx;
					position: relative;
					color: #333;

				}

				.lt {
					margin-top: -20rpx;
					font-size: 25rpx;
					color: #555
				}
			}
		}

		.title {
			color: #616161;
			text-align: center;
			font-size: 30rpx;
			margin-bottom: 34rpx;
		}

		.mima {
			width: 600rpx;
			height: 80rpx;
			margin: 0 auto;
			position: relative;
			display: flex;
			justify-content: space-between;

			.item {
				width: 80rpx;
				height: 80rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #E5E5E5;

				.line {
					width: 2rpx;
					height: 40rpx;
					background: #979797;
					animation: shan 1s ease infinite;
				}

				.dot {
					width: 20rpx;
					height: 20rpx;
					border-radius: 20rpx;
					background: black;
				}
			}

			.trade_pwd {
				position: absolute;
				height: 78rpx !important;
				width: 480rpx;
				opacity: 0;
			}
		}
	}

	@keyframes shan {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	@keyframes checked_bg {
		0% {
			background: #fff
		}

		50% {
			background: #D3D1E2
		}

		100% {
			background: #fff
		}
	}
</style>
